<template>
  <n-badge :value="useStore.draftCount" :offset="[-10, 5]" color="#FD4A29">
    <div class="main" @click="$router.push({ path: '/OA/UserCenter/Drafts' })">
      <img :src="VDispose" style="width:18px;height: 18px;margin-right:2px;" />
      草稿箱
    </div>
  </n-badge>
  <n-badge :value="useStore.messageCount" :offset="[-10, 5]" color="#FD4A29">
    <div class="main" @click="$router.push({ path: '/OA/UserCenter/MessageNotice' })">
      <img :src="VMessageNotice" style="width:20px;height: 20px;margin-right:2px;" />
      消息通知
    </div>
  </n-badge>
  <div class="main" @click="$router.push({ path: '/OA/UserCenter/Submit' })">
    <img :src="VSubmit" style="width:18px;height: 18px;margin-right:2px;" />
    我已提交
  </div>
  <n-badge :value="useStore.examineCount" :offset="[-10, 5]" color="#FD4A29">
    <div class="main" @click="$router.push({ path: '/OA/UserCenter/Examine' })">
      <NIcon :size="20" class="iconStyle">
        <ApprovalFilled />
      </NIcon>
      待我处理
    </div>
  </n-badge>
  <div class="main" @click="$router.push({ path: '/OA/UserCenter/Dispose' })">
    <NIcon :size="20" class="iconStyle">
      <AccountTreeOutlined />
    </NIcon>
    经我审批
  </div>
  <n-badge :value="useStore.receiveCount" :offset="[-10, 5]" color="#FD4A29">
    <div class="main" @click="$router.push({ path: '/OA/UserCenter/Receive' })">
      <img :src="VRevice" style="width:16px;height: 16px;margin-right:2px;" />
      我的收文
    </div>
  </n-badge>
</template>

<script setup lang="ts">
import { NBadge, NIcon } from 'naive-ui'
import {
  AccountTreeOutlined,
  ApprovalFilled
} from '@vicons/material'
import { userCenterStore } from '@/stores/notice'

import VMessageNotice from '@/assets/images/消息通知.png'
import VSubmit from '@/assets/images/已提交.png'
import VRevice from '@/assets/images/收件箱 (1).png'
import VDispose from '@/assets/images/line-draft（草稿） (1).png'

const useStore = userCenterStore()
useStore.getTopCount()

document.addEventListener('flushTopCount', () => {
  useStore.getTopCount()
})
</script>

<style scoped lang="scss">
.main {
  display: flex;
  align-items: center;
  height: 30rem;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  cursor: pointer;
  border-radius: 20rem;
  padding: 20rem 10rem;

  .iconStyle {
    margin-right: 3rem;
  }

  &:hover {
    animation: show 0.2s forwards;
  }
}

@keyframes show {
  to {
    background-color: #f6fff5;
    color: #6cb187;
  }
}

:deep(.n-badge-sup) {
  font-size: 14rem;
  line-height: 16rem;
}
</style>
